<!doctype html>
<html>
    <head>
        <title>Single Sign-On Ajax demo</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        
        <style>
            .state {
                display: none;
            }
            body.anonymous .state.anonymous,
            body.authenticated .state.authenticated {
                display: initial;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Single Sign-On Ajax demo</h1>

            <div id="error" class="alert alert-danger" style="display: none;"></div>

            <form id="login-form" class="form-horizontal state anonymous">
                <div class="form-group">
                    <label for="inputUsername" class="col-sm-2 control-label">Username</label>
                    <div class="col-sm-10">
                        <input type="text" name="username" class="form-control" id="inputUsername">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                        <input type="password" name="password" class="form-control" id="inputPassword">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">Login</button>
                    </div>
                </div>
            </form>

            <div class="state authenticated">
                <h3>Logged in</h3>
                <dl id="user-info" class="dl-horizontal"></dl>
                
                <a id="logout" class="btn btn-default">Logout</a>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>

